<template>
    <div style="width:600px;height:300px">
        <schart ref='line' class='schart' canvasId='line' :options='chart2'></schart>
    </div>
</template>
<script>
import echarts from "echarts";
import Schart from 'vue-schart'
import Qs from 'qs';
export default {
    name: "gpaChart",
    created() {
        this.getAllEcharts();
    },
    data() {
        return {
            chart2: {
                type: 'line',
                title: {
                    text: '绩点变化'
                },
                labels: [],
                datasets: [
                    {
                        data: []
                    }
                ],
                id1: 0
            },
        };
    },
    methods: {
        load_status() {
            this.getAllEcharts()
        },
        async getAllEcharts() {
            let id = localStorage.getItem("ms_userid")
            await this.$route.query.id
            this.id1 = this.$route.query.id
            console.log(this.id1)
            if(this.id1) {
                id = this.id1
            }
            const {data: res1} = await this.$axios.post("/rankInfo/gpa", Qs.stringify({
                "id" : id
            }));
            // console.log(res1);
            this.chart2.labels = res1.name;
            this.chart2.datasets[0].data = res1.num;
        },
        setChart() {
            // 基于准备好的dom，初始化echarts实例
            this.chart = echarts.init(document.getElementById('main'))
            // console.log(this.chart)
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: "人数分布"
                },
                tooltip: {},
                legend: {
                    data: ["人数"]
                },
                xAxis: {
                    data: this.name,
                },
                yAxis: {},
                series: [
                    {
                        name: "人数",
                        type: "bar",
                        data: this.num,
                    }
                ],
            }
            this.chart.setOption(option);
        },
        mounted() {
            this.load_status()
            // this.$nextTick(function () {
            //     this.drawPid("main");
            // });
        }
    },
    components: {
        Schart,
        echarts
    }
}
</script>
<style>
.schart {
    width: 100%;
    height: 300px;
}
</style>
